<template>
    <div>
        <div class="shaixuan">
            <div class="shaiheader">筛选条件</div>
            <i></i>
            <Row>
                <Col span="21">
                    <Row>
                        <Col span="1">
                            <i></i>
                        </Col>
                        <Col span="8">
                            <Row>
                                <Col span="7" class="titlename">企业名称:</Col>
                                <Col span="17">
                                    <Input
                                        size="small"
                                        class="samllinput"
                                        v-model="companyName"
                                        placeholder="请输入企业名称"
                                        type="text"
                                    />
                                </Col>
                            </Row>
                        </Col>
                        <Col span="1">
                            <i></i>
                        </Col>
                        <Col span="10">
                            <Col span="1">
                                <i></i>
                            </Col>
                            <Row>
                                <Col span="6" class="titlename">用户账户:</Col>
                                <Col span="16">
                                    <Input
                                        type="text"
                                        class="samllinput"
                                        v-model="account"
                                        placeholder="请输入用户账户"
                                        size="small"
                                    />
                                </Col>
                            </Row>
                        </Col>
                    </Row>
                    <i></i>
                    <i></i>
                    <Row>
                        <Col span="1">
                            <i></i>
                        </Col>
                        <Col span="8">
                            <span class="titlename">时间:</span>
                            <DatePicker
                                type="daterange"
                                split-panels
                                placeholder="选择时间段"
                                style="width: 200px"
                                size="small"
                                placement="top-start"
                                @on-change="setTime"
                            ></DatePicker>
                        </Col>
                        <Col span="1">
                            <i></i>
                        </Col>
                        <Col span="6">
                            <Row style="width:190px">
                                <Col style="padding-left:8px" span="6">点数:</Col>
                                <Col span="15">
                                    <Select style="margin-left: 20px" v-model="points" size="small">
                                        <Option
                                            v-for="i in pointList"
                                            :value="i"
                                        >{{i==''?'所有':i}}</Option>
                                    </Select>
                                </Col>
                            </Row>
                        </Col>
                        <Col span="8">
                            <Row>
                                <Col span="7">
                                    <span id="fuwu">服务状态：</span>
                                </Col>
                                <Col span="14">
                                <Select v-model="isUse" size="small" style="margin-left: 20px">
                                    <Option :value="0">开通</Option>
                                    <Option :value="1">关闭</Option>
                                </Select>
                                </Col>
                            </Row>
                        </Col>
                    </Row>
                </Col>
                <Col span="3">
                    <Button @click="loadData">搜索</Button>
                </Col>
            </Row>
            <i></i>
        </div>
        <i></i>
        <span class="titlename">显示列数：</span>
        <Select v-model="pageSize" size="small" class="titlename" style="width:100px">
            <Option v-for="item in pagelist" :value="item" :key="item">{{item}}</Option>
        </Select>
        <Button @click="addQy">新增</Button>
        <i></i>
        <Table border :columns="columns1" :data="data1"></Table>
    </div>
</template>
<script>
import { post } from "../../http/http";
import moment from "moment";
export default {
    data() {
        return {
            columns1: [
                {
                    title: "企业名称",
                    key: "companyName",
                    render: (h, params) => {
                        if (params.row.$isEdit) {
                            return h("input", {
                                domProps: {
                                    value: params.row.companyName
                                },
                                on: {
                                    input: function(event) {
                                        params.row.companyName =
                                            event.target.value;
                                    }
                                }
                            });
                        } else {
                            return h("div", params.row.companyName);
                        }
                    }
                },
                {
                    title: "用户账号",
                    key: "account",
                    render: (h, params) => {
                        if (params.row.$isEdit) {
                            return h("input", {
                                domProps: {
                                    value: params.row.account
                                },
                                on: {
                                    input: function(event) {
                                        params.row.account = event.target.value;
                                    }
                                }
                            });
                        } else {
                            return h("div", params.row.account);
                        }
                    }
                },
                {
                    title: "开始日期",
                    key: "address",
                    render: (h, params) => {
                        if (params.row.$isEdit) {
                            return h("DatePicker", {
                                props: {
                                    value: new Date(params.row.startTime) && new Date(),
                                    format: "yyyy年MM月dd日"
                                },
                                on: {
                                    "on-change": function(event) {
                                        console.log(event)
                                        params.row.startTime = moment(
                                            event,
                                            "YYYY年MM月DD日"
                                        ).format("YYYY-MM-DD HH:mm:ss");
                                        console.log(params.row.startTime)
                                    }
                                }
                            });
                        } else {
                            let date = new Date(params.row.startTime) || "";
                            return h(
                                "div",
                                date.getFullYear() +
                                    "年" +
                                    (date.getMonth() + 1) +
                                    "月" +
                                    date.getDate() +
                                    "日"
                            );
                        }
                    }
                },
                {
                    title: "结束日期",
                    key: "endTime",
                    render: (h, params) => {
                        if (params.row.$isEdit) {
                            return h("DatePicker", {
                                props: {
                                    value: params.row.endTime && new Date(),
                                    format: "yyyy年MM月dd日"
                                },
                                on: {
                                    "on-change": function(event) {
                                        console.log(event);
                                        params.row.endTime = moment(
                                            event,
                                            "YYYY年MM月DD日"
                                        ).format("YYYY-MM-DD HH:mm:ss");
                                    }
                                }
                            });
                        } else {
                            console.log(params.row);
                            let date = new Date(params.row.endTime);
                            return h(
                                "div",
                                date.getFullYear() +
                                    "年" +
                                    (date.getMonth() + 1) +
                                    "月" +
                                    date.getDate() +
                                    "日"
                            );
                        }
                    }
                },
                {
                    title: "点数额度",
                    key: "points",
                    render: (h, params) => {
                        if (params.row.$isEdit) {
                            let arr = [];
                            for (let i = 0; i < this.pointList.length; i++) {
                                arr.push(
                                    h(
                                        "Option",
                                        {
                                            props: {
                                                value: this.pointList[i]
                                            }
                                        },
                                        this.pointList[i]
                                    )
                                );
                            }

                            return h(
                                "Select",
                                {
                                    props: {
                                        value: params.row.points,
                                        label: params.row.points
                                    },

                                    on: {
                                        "on-change": function(event) {
                                            params.row.points = event;
                                            console.log(params);
                                        }
                                    }
                                },
                                arr
                            );
                        } else {
                            return h("div", params.row.points);
                        }
                    }
                },

                {
                    title: "服务状态",
                    key: "isUse",
                    render: (h, params) => {
                        if (params.row.$isEdit) {
                            return h(
                                "Select",
                                {
                                    domProps: {
                                        value: params.row.isUse
                                    },
                                    on: {
                                        "on-change": function(event) {
                                            params.row.isUse = event;
                                            console.log(params);
                                        }
                                    }
                                },
                                [
                                    h(
                                        "Option",
                                        {
                                            props: {
                                                value: 0
                                            }
                                        },
                                        "开通"
                                    ),
                                    h(
                                        "Option",
                                        {
                                            props: {
                                                value: 1
                                            }
                                        },
                                        "未开通"
                                    )
                                ]
                            );
                        } else {
                            return h(
                                "div",
                                params.row.isUse == 0 ? "开通" : "未开通"
                            );
                        }
                    }
                },
                {
                    title: "操作",
                    key: "address",
                    render: (h, params) => {
                        return h("div", [
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "primary",
                                        size: "small"
                                    },
                                    style: {
                                        marginRight: "5px"
                                    },
                                    on: {
                                        click: () => {
                                            if (params.row.$isEdit) {
                                                this.handleSave(params.row);
                                            } else {
                                                this.handleEdit(params.row);
                                            }
                                        }
                                    }
                                },
                                params.row.$isEdit ? "确定" : "编辑"
                            ),
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "error",
                                        size: "small"
                                    },
                                    on: {
                                        click: () => {
                                            this.removeQy(params.row.id);
                                        }
                                    }
                                },
                                "移除"
                            )
                        ]);
                    }
                }
            ],
            data1: [],
            account: "",
            companyName: "",
            startTime: "",
            endTime: "",
            isUse: 0,
            pageNum: 0,
            pageSize: 10,
            points: "",
            pointList: ["", 1000, 5000, 10000, 20000, 50000],
            pagelist: [10, 20, 30, 40, 50]
        };
    },
    created() {
        this.loadData();
    },
    methods: {
        async loadData() {
            const data = await post("queryPageQy", {
                account: this.account,
                companyName: this.companyName,
                startTime: this.startTime && moment(this.startTime).format("YYYY-MM-DD"),
                // 2020-01-07 16:03:09
                endTime: this.endTime && moment(this.endTime).format("YYYY-MM-DD"),
                isUse: this.isUse,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                points: this.points
            }).then(data => data);
            this.data1 = data.data.list;
        },
        changKaitong(is) {
            console.log("点击了");

        },
        handleEdit(row) {
            this.$set(row, "$isEdit", true);
        },
        async handleSave(row) {
            console.log(row);
            if (
                row.companyName != "" &&
                row.account != "" &&
                row.points != "" &&
                row.startTime != "" &&
                row.endTime != ""
            ) {
                this.$set(row, "$isEdit", false);
                //TODO:修改接口 直接传 row
                const data = await post("updataQy", {
                    ...row,
                    startTime: moment(row.startTime).format("YYYY-MM-DD HH:mm:ss"),
                    endTime: moment(row.endTime).format("YYYY-MM-DD HH:mm:ss")
                }).then(data => data);
            } else {
                this.$Message.warning("选项不能为空");
            }
        },
        setTime(e) {
            this.startTime = e[0];
            this.endTime = e[1];
        },
        async removeQy(id) {
            const data = await post("deleteQy", {
                id
            }).then(data => data);
        },
        addQy() {
            this.data1.unshift({
                companyName: "",
                account: "",
                points: "1000",
                startTime: "",
                endTime: "",
                isUse: 1,
                $isEdit: true
            });
        }
    }
};
</script>

<style lang="less">
.ivu-table-wrapper.ivu-table-wrapper-with-border {
    overflow: visible;
}
.ivu-select-dropdown {
    z-index: 9999;
}
#fuwu {
    padding-left: 10px;
}
.samllinput {
    width: 190px;
}
.titlename {
    padding-right: 10px;
}
.shaixuan {
    background: #f8f8f9;
    border: 1px solid #dcdee2;
    .shaiheader {
        height: 35px;
        line-height: 35px;
        font-size: 15px;
        padding-left: 10px;
        border-bottom: 1px solid #dcdee2;
    }
}
i {
    display: block;
    height: 10px;
}
</style>